<template>
  <div>
    <el-form :inline="true" class="query-form" ref="searchForm" :model="searchForm" @keyup.enter.native="refreshList()"
      @submit.native.prevent>
      <!-- 搜索框-->
      <el-form-item prop="queryDate">
        <el-date-picker v-model="searchForm.queryDate" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query()" size="small" :loading="loading">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <table cellspacing="0" class="table">
          <thead class="thead">
            <tr>
              <th class="table_cell tr url">
                页面路径
              </th>
              <th class="table_cell tr pv">
                访问次数
              </th>
              <th class="table_cell tr pv">
                访问人数
              </th>
              <th class="table_cell tr pv">
                次均时长(s)
              </th>
              <th class="table_cell tr pv">
                入口页次数
              </th>
              <th class="table_cell tr pv">
                退出页次数
              </th>
              <th class="table_cell tr pv">
                退出率
              </th>
              <th class="table_cell tr pv">
                分享次数
              </th>
              <th class="table_cell tr pv">
                分享人数
              </th>
            </tr>
          </thead>
          <tbody class="tbody">
            <tr v-for="(row,index) in chartData" :key="index">
              <td class="table_cell">{{row.pagePath}}</td>
              <td class="table_cell">{{row.pageVisitPv}}</td>
              <td class="table_cell">{{row.pageVisitUv}}</td>
              <td class="table_cell">{{toFixed(row.pageStayTotalTimePv/row.pageVisitPv)}}</td>
              <td class="table_cell">{{row.entryPagePv}}</td>
              <td class="table_cell">{{row.exitPagePv}}</td>
              <td class="table_cell">{{exitPageRate(row)}}</td>
              <td class="table_cell">{{row.pageSharePv}}</td>
              <td class="table_cell">{{row.pageShareUv}}</td>
            </tr>
          </tbody>
        </table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import moment from 'moment'
  export default {
    data() {
      return {
        searchForm: {
          queryDate: []
        },
        loading: false,
        chartData: [],
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > moment().subtract(1, 'days');
          },
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = moment().subtract(1, 'days');
              picker.$emit('pick', [moment(end).subtract(7, 'days'), end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = moment().subtract(1, 'days');
              picker.$emit('pick', [moment(end).subtract(1, 'months'), end]);
            }
          }]
        }
      }
    },
    mounted() {
      const end = moment().subtract(1, 'days');
      this.searchForm.queryDate = [moment(end).subtract(1, 'months'), end]
      this.query()
    },
    methods: {
      exitPageRate(row) {
        if(row.pageVisitPv === 0){
          return 0+'%';
        }
        return this.toFixed(row.exitPagePv*100/row.pageVisitPv)+'%'
      },
      query() {
        var dataMap = {}
        this.loading = true
        var url = "/wx/getVisitPage"
        this.$http({
          url: url,
          method: 'get',
          params: {
            'beginDate': moment(this.searchForm.queryDate[0]).format("YYYY-MM-DD"),
            'endDate': moment(this.searchForm.queryDate[1]).format("YYYY-MM-DD")
          }
        }).then(({
          data
        }) => {
          this.loading = false
          if (data && data.success) {
            (data.data || []).forEach((row)=>{
              var pagePath = row.pagePath
              if(dataMap.hasOwnProperty(pagePath)) {
                dataMap[pagePath].pageVisitPv += row.pageVisitPv
                dataMap[pagePath].pageVisitUv += row.pageVisitUv
                dataMap[pagePath].pageStayTimePv += row.pageStayTimePv
                dataMap[pagePath].entryPagePv += row.entryPagePv
                dataMap[pagePath].exitPagePv += row.exitPagePv
                dataMap[pagePath].pageSharePv += row.pageSharePv
                dataMap[pagePath].pageShareUv += row.pageShareUv
                dataMap[pagePath].pageStayTotalTimePv += row.pageStayTimePv*row.pageVisitPv;
              } else {
                dataMap[pagePath] = row
                dataMap[pagePath].pageStayTotalTimePv = row.pageStayTimePv*row.pageVisitPv;
              }
            })
            this.chartData = Object.values(dataMap).sort((a, b)=>{
              return b.pageVisitPv-a.pageVisitPv
            });
          }
        })
      }
    }
  }
</script>
<style scoped="scoped">
  .table {
    width: 100%;
    font-size: 14px;
    background-color: #ffffff;
    text-align: center;
    border-top: 1px solid #e7e7eb;
    border-bottom: 1px solid #e7e7eb;
    border-spacing: 0;
    font-size: 14px;
    font-weight: normal;
  }

  .thead {
    background-color: #f6f8f9;
    border-radius: 8px 8px 0 0;
    position: relative;
    z-index: 1;
    color: #7e8081;

  }

  .thead .table_cell:first-child {
    border-left-width: 0;
  }

  .table_cell:first-child {
    text-align: left;
    padding-left: 40px;
  }

  .thead .table_cell {
    line-height: 60px;
    border-bottom: none;
    font-weight: normal;
  }

  .tbody .table_cell {
    height: 52px;
    padding-top: 20px;
    padding-bottom: 20px;
    border-top: none;
    border-bottom: 1px solid #e7e7eb;
    word-wrap: break-word;
    word-break: break-all;
    padding-right: 5px;
    font-weight: normal;
    color: #353535;
  }
</style>
